<template>
  <div class="login" :style="{ '--bg': backImgSrc }">
    <EBorderBox3 text="E-DataV 边框" :font-size="20" :borderWidth="1" border-color="#1e80ff"
      background-color="transparent" text-position="right" font-color="#fff" class="form">
      <p class="title">开源系统</p>
      <a-form :model="formState" v-bind="layout" name="nest-messages" :validate-messages="validateMessages"
        @finish="onFinish">
        <a-form-item :name="['user', 'username']" label="账号" :rules="[{ required: true }]">
          <a-input placeholder="请输入账号" v-model:value="formState.user.username" />
        </a-form-item>

        <a-form-item :name="['user', 'password']" label="密码" :rules="[{ required: true }]">
          <a-input-password placeholder="请输入密码" v-model:value="formState.user.password" />
        </a-form-item>
        <a-form-item class="loginBtn">
          <a-button type="primary" html-type="submit">登录</a-button>
        </a-form-item>
      </a-form>
    </EBorderBox3>
  </div>
</template>

<script setup lang="ts">
import {
  EBorderBox3
} from 'e-datav-vue3'
import { reactive, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { setLocalData } from '@/utils/tool'
import { useUserStore } from '@/store/user'
import dayjs from 'dayjs'
import _ from 'lodash'
import { getLocalData } from '@/utils/tool'
import imgSrc from '@/assets/images/bg.jpg'
import { initRoute } from '@/router/permisstion'
const backImgSrc = ref()
const stores = useUserStore()
const $router = useRouter()
const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
}
const validateMessages = {
  required: '${label}是必需的!',
}

const formState = reactive({
  user: {
    username: 'admin',
    password: '123456',
  },
})

const onFinish = (info: any) => {
  const token = dayjs().format('YYYY-MM-DD')
  setLocalData('zsnToken', token)
  const path = stores.$state.activePath || '/home'
  initRoute()
  $router.push(path)
}

const initBackImg = () => {
  backImgSrc.value = `url(${imgSrc})`
  if (getLocalData('LOGIN_IMG')) backImgSrc.value = getLocalData('LOGIN_IMG')
}
onMounted(() => {
  initBackImg()
})
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--bg) no-repeat;
  background-size: 100% auto;
  background-position: center;

  .form {
    width: 40%;
    height: fit-content;
    position: absolute;
    box-sizing: border-box;
    min-width: 450px;
    max-width: 550px;
    padding: 20px 50px 20px 20px;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0),
        rgba(172, 214, 255, 0.5) 80%),
      linear-gradient(to right, rgb(40, 148, 255), rgba(210, 233, 255, 0.5));
    border-radius: 17px;
    user-select: none;
    font-weight: bolder;
    color: black;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .title {
      margin-left: 10%;
      margin-bottom: 10px;
      font-size: 28px;
      color: orangered;
      font-weight: 600;
      letter-spacing: -1px;
      position: relative;
      display: flex;
      align-items: center;
      padding-left: 30px;
      -webkit-box-reflect: below -10px -webkit-linear-gradient(transparent,
          transparent 5%,
          rgba(255, 255, 255, 0.3));
    }

    .loginBtn {
      text-align: center;

      button {
        width: 100%;
        margin-left: calc(4 * 100% / 20);
      }
    }
  }

}

.title::before,
.title::after {
  position: absolute;
  content: '';
  height: 30px;
  width: 30px;
  border-radius: 50%;
  left: 0px;
  background-color: #eac100;
}

.title::before {
  width: 20px;
  height: 20px;
  background-color: #eac100;
}

.title::after {
  width: 20px;
  height: 20px;
  animation: pulse 3s linear infinite;
}

@keyframes pulse {
  from {
    transform: scale(0.5);
    opacity: 1;
  }

  to {
    transform: scale(2.5);
    opacity: 0;
  }

}
</style>
